<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>修改订单-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../static/css/font.css">
  <link rel="stylesheet" href="../../../static/css/weadmin.css">
  <script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  <style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
    }
  </style>
  <script>
    //自动填写订单号
    $("#L_invoice").val(getInvoice())

    //自动获得订单号
    function getInvoice() {
      var date = new Date()
      var random = Math.random()
      return ""+date.getFullYear()+(date.getMonth() + 1)+date.getDate()+date.getHours()
              +date.getMinutes()+date.getSeconds()+Math.floor(random*100)
    }
  </script>
</head>

<body>
  <div class="weadmin-body">
    <form class="layui-form">
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>用户ID
        </label>
        <div class="layui-input-inline">
          <input type="number" id="id" name="id" required="" lay-verify="required" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>收货人
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" required="" lay-verify="required"  autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="phone" class="layui-form-label">
          <span class="we-red">*</span>手机
        </label>
        <div class="layui-input-inline">
          <input type="text" id="phone" name="phone" required="" lay-verify="required|phone" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>收货地址
        </label>
        <div class="layui-input-inline">
          <input type="text" id="address" name="address" required="" lay-verify="required" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>配送物流
        </label>
        <div class="layui-input-inline">
          <select name="shipping">
            <option value="顺丰物流">顺丰物流</option>
            <option value="京东物流">京东物流</option>
            <option value="申通物流">申通物流</option>
            <option value="中通物流">中通物流</option>
            <option value="圆通物流">圆通物流</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>支付方式
        </label>
        <div class="layui-input-inline">
          <select name="controller">
            <option value="支付宝">支付宝</option>
            <option value="微信">微信</option>
            <option value="货到付款">货到付款</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="L_invoice" class="layui-form-label"><span class="we-red">*</span>发票抬头</label>
        <div class="layui-input-inline">
          <input type="text" id="L_invoice" name="invoice" disabled  lay-verify="required" autocomplete="off"
            class="layui-input layui-btn-disabled">
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="desc" class="layui-form-label"><span class="we-red">*</span>商品增加
          <a class="layui-btn layui-btn-sm layui-btn-primary product-add" onclick="addTable();"><i class="layui-icon">&#xe608;</i>
            添加</a>
        </label>
        <div class="layui-input-block">
          <table class="layui-table" id="myTable">
            <thead>
              <tr>
                <th>id</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th>操作</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="desc" class="layui-form-label">描述</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">
        </label>
        <button class="layui-btn add" lay-filter="add" lay-submit="">确定</button>
        <input type="hidden" name="dataId" id="dataId" value="" />
        <input type="hidden" name="userId" id="userId" value="" />
      </div>
    </form>
  </div>
  <script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript">
    layui.extend({
      admin: '{/}../../static/js/admin'
    });
    layui.use(['form', 'jquery', 'admin', 'layer'], function () {
      var form = layui.form,
              $ = layui.jquery,
              admin = layui.admin,
              layer = layui.layer;



      //页面初始化加载
      var num = 1

      window.addTable = function () {
        var tableHtml = "";
        tableHtml += '<tr id="tr' + num + '">' +
                '<td><div class="layui-input-inline"><input type="text" name="pid" autocomplete="off" lay-verify="required" class="layui-input product-id"></div></td>' +
                '<td><div class="layui-input-inline"><input type="text" name="name" autocomplete="off" lay-verify="required" disabled class="layui-input layui-btn-disabled product-name"></div></td>' +
                '<td><div class="layui-input-inline"><input type="text" name="price" autocomplete="off" lay-verify="required" class="layui-input product-price"></div></td>' +
                '<td><div class="layui-input-inline"><input type="text" name="qty" autocomplete="off" lay-verify="required" class="layui-input product-qty"></div></td>' +
                '<td><div class="layui-input-inline"><input type="text" name="sum" autocomplete="off" lay-verify="required" disabled class="layui-input layui-btn-disabled product-sum"></div></td>' +
                '<td><a style="cursor: pointer; color: blue;" class="delete">删除</a>' +
                '</td>' +
                '</tr>';

        var elements = $("#myTable").children().length; //表示id为“mtTable”的标签下的子标签的个数

        $("#myTable").children().eq(elements - 1).after(tableHtml); //在表头之后添加空白行
        num++;
      }

      //删除行
      $("#myTable").on("click",".delete",function () {
        $(this).parents("tr").remove()
      })

      $(function () {
        setTimeout(function () {
          frameVal();
        }, 100);
      });
      function frameVal() {
        var dataId = $('input[name="dataId"]').val();
        var userId = $("#userId").val();

        //填写描述
        $.get({
          url: "/order/find/"+dataId,
          contentType: "application/json;charset=UTF-8",
          success: function (data) {
            $("#desc").val(data)
          },
          async: false
        })

        //填写商品信息
        $.get({
          url: "/order/findProduct/"+dataId,
          contentType: "application/json;charset=UTF-8",
          success: function (data) {
            $.each(data,function (index,item) {
              index++
              $(".product-add").click()
              $("#tr"+index).find(".product-id").val(item.pid)
              $("#tr"+index).find(".product-name").val(item.name)
              $("#tr"+index).find(".product-price").val(item.price)
              $("#tr"+index).find(".product-qty").val(item.qty)
              $("#tr"+index).find(".product-sum").val(item.sum)
            })
          },
          async: false
        })

        parent.layui.jquery("#orderList tr").each(function () {
          if ($(this).attr('data-id') == dataId) {
            var tdArr = $(this).children('td');
            var username = tdArr.eq(2).text();
            var phone = tdArr.eq(3).text();
            var address = tdArr.eq(4).text();
            var controller = tdArr.eq(6).text();
            var shipping = tdArr.eq(7).text();
            var invoice = tdArr.eq(8).text();
            $('input[name="id"]').val(userId);
            $('input[name="username"]').val(username);
            $('input[name="phone"]').val(phone);
            $('option[value="' + controller + '"]').attr("selected", true);
            $('option[value="' + shipping + '"]').attr("selected", true);
            $('input[name="invoice"]').val(invoice);
            $('input[name="address"]').val(address);
            form.render();
          }
        });
      }

      var sumAll = 0
      var products = new Array()
      $(".add").click(function () {
        $("#myTable").children("tr").each(function () {
          var product = {}
          product.productId = $(this).find(".product-id").val()
          product.productName = $(this).find(".product-name").val()
          product.price = $(this).find(".product-price").val()
          product.qty = $(this).find(".product-qty").val()
          product.sum = $(this).find(".product-sum").val()
          sumAll += parseInt(product.sum);
          products.push(product)
        })
      })

      //判断是否有修改数据
      var change_flag = false
      $("#myTable").on("change","input",function () {
        change_flag = true
      })

      //监听提交
      form.on('submit(add)', function (data) {
        var dataId = $('input[name="dataId"]').val();
        var f = data.field;
        var order_data = {customerId: f.id,name: f.username,phone: f.phone,address: f.address,invoice: f.invoice,
          sendMethod: f.shipping,payMethod: f.controller,description: f.desc,orderSum: sumAll}
        $.post({
          url: "/order/update/"+dataId,
          contentType: "application/json;charset=UTF-8",
          data: JSON.stringify(order_data),
          success: function () {
            parent.layui.jquery("#orderList tr").each(function () {
              if ($(this).attr('data-id') == dataId) {
                console.log($(this))
                var tdArr = $(this).children('td');
                tdArr.eq(2).text(f.username);
                tdArr.eq(3).text(f.phone);
                tdArr.eq(4).text(f.address);
                tdArr.eq(5).text(sumAll);
                tdArr.eq(6).text(f.controller);
                tdArr.eq(7).text(f.shipping);
                form.render();
              }
            });
            $.each(products,function (index,item) {
              item.orderId = dataId
            })
          },
          async: false
        })
        if (change_flag) {
          $.post({
            url: "/order/updateProducts",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(products)
          })
        }
        layer.alert("修改成功", {
          icon: 6
        }, function () {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
        });
        return false;
      });

    });

    //自动填写用户相关信息
    $("#id").keyup(function () {
      var id = $(this).val()
      if (id == "") {
        $("#username").val("")
        $("#phone").val("")
        $("#address").val("")
      } else {
        $.get({
          url: "/member/message/"+id,
          contentType: "application/json;charset=UTF-8",
          success: function (data) {
            if (data!="") {
              $("#username").val(data.customerName)
              $("#phone").val(data.customerPhone)
              $("#address").val(data.customerAddress)
              $("#username").removeClass("layui-btn-disabled")
              $("#phone").removeClass("layui-btn-disabled")
              $("#address").removeClass("layui-btn-disabled")
              $("#username").removeAttr("disabled")
              $("#phone").removeAttr("disabled")
              $("#address").removeAttr("disabled")
            } else {
              $("#username").val("")
              $("#phone").val("")
              $("#address").val("")
              $("#username").addClass("layui-btn-disabled")
              $("#phone").addClass("layui-btn-disabled")
              $("#address").addClass("layui-btn-disabled")
              $("#username").attr("disabled",true)
              $("#phone").attr("disabled",true)
              $("#address").attr("disabled",true)
            }
          },
          async: false
        })
      }
    })


    //自动填写商品名称和价格
    $("#myTable").on("keyup",".product-id",function () {
      var productId = $(this).val()
      var tr = $(this).parents("tr")
      if (productId == "") {
        tr.find(".product-name").val("")
        tr.find(".product-price").val("")
      } else {
        $.get({
          url: "/product/message/"+productId,
          contentType: "application/json;charset=UTF-8",
          success: function (data) {
            tr.find(".product-name").val(data.productName)
            tr.find(".product-price").val(data.price)
          },
          async: false
        })
      }
    })

    //自动计算总价
    $("#myTable").on("keyup",".product-qty",function () {
      var tr = $(this).parents("tr")
      var price = tr.find(".product-price").val();
      var qty = $(this).val()
      tr.find(".product-sum").val(price*qty)
    })
    $("#myTable").on("keyup",".product-price",function () {
      var tr = $(this).parents("tr")
      var qty = tr.find(".product-qty").val();
      var price = $(this).val()
      tr.find(".product-sum").val(price*qty)
    })
  </script>
</body>

</html>